import React, { Component } from 'react';
import { connect } from 'dva';
import { produce, Draft } from 'immer';
import { Select, Button, Table, DatePicker, Pagination, Cascader, Icon } from 'antd';
import styles from './vitalSignsDetail.css';
import { Statistics } from '@/models/connect';
import { DEFAULT_PAGE_NUM, DEFAULT_PAGE_SIZE } from '@/const';
import { positionInfoExportInfo } from '@/services/statistics';
import { isMenuVisible } from '@/utils/utils';
import { Dispatch, AnyAction } from 'redux';
import router from 'umi/router';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

const { Option } = Select;
interface ByenergyDetailPsops {
  vitalSignsDetails?: Statistics;
  treeTypeData?: Statistics;
  loading: boolean;
  byenergyDetails?: Statistics;
  dispatch: Dispatch<AnyAction>;
}
interface DetailState {
  filterQueryParams: any;
  tableColumns: any;
}
class byenergyDetail extends Component<ByenergyDetailPsops, DetailState> {
  // constructor(props: ByenergyDetailPsops) {
  //     super(props);
  // }
  state: DetailState = {
    filterQueryParams: {
      deviceId: this.props.location.query.deviceId, // 资产编号
      startTime: this.props.location.query.startTime, // 开始采集时间
      endTime: this.props.location.query.endTime, // 结束采集时间
      pageNum: DEFAULT_PAGE_NUM,
      pageSize: 10,
    },
    tableColumns: localStorage.getItem('businessField'),
  };
  handleChange = (value: string) => {
    // 检测对象
    this.setState(
      produce((draft: Draft<DetailState>): void => {
        draft.filterQueryParams.treeTypeName = value[value.length - 1];
      }),
    );
  };
  handleStartOpenChange = (date: any, dateString: any) => {
    // 开始时间
    this.setState(
      produce((draft: Draft<DetailState>): void => {
        draft.filterQueryParams.startTime = dateString;
      }),
    );
  };
  handleEndOpenChange = (date: any, dateString: any) => {
    // 结束时间
    this.setState(
      produce((draft: Draft<DetailState>): void => {
        draft.filterQueryParams.endTime = dateString;
      }),
    );
  };
  filter = (inputValue: any, path: any) => {
    return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
  };
  // 页码变化
  handlePageChange: (pageNum: number, pageSize: number | undefined) => void = pageNum => {
    this.setState(
      produce((draft: Draft<DetailState>): void => {
        draft.filterQueryParams.pageNum = pageNum;
      }),
      () => this.handleFilterQuery(),
    );
  };
  handleFilterQuery = () => {
    // 搜索
    // this.setState(
    //   produce((draft: Draft<DetailState>): void => {
    //     draft.filterQueryParams.pageNum = 1;
    //   }),
    // );
    const { dispatch } = this.props;
    dispatch({ type: 'statistics/positionDetail', payload: this.state.filterQueryParams });
  };
  download = () => {
    //导出
    const { dispatch } = this.props;
    dispatch({
      type: 'statistics/drugListEx',
      payload: {
        params: this.state.filterQueryParams,
        typeApi: positionInfoExportInfo,
        name: '位置信息详情.xlsx',
      },
    });
  };
  go = () => {
    localStorage.setItem('isTrue', '15');
    router.goBack();
  };
  componentWillMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'statistics/positionDetail', payload: this.state.filterQueryParams });
    dispatch({ type: 'statistics/treeTypeSelectAll' });
  }
  columns: any = JSON.parse(this.state.tableColumns);
  // [
  //     {
  //         title: '资产编号',
  //         dataIndex: 'deviceId',
  //         key: 'deviceId',
  //     },
  //     {
  //         title: '坐标位置',
  //         dataIndex: 'positionCoordinates',
  //         key: 'positionCoordinates',
  //     },
  //     {
  //         title: '采集时间',
  //         dataIndex: 'createTime',
  //         key: 'createTime',
  //     }
  // ]
  options: any = [
    {
      value: '食堂',
      label: '食堂',
      children: [
        {
          value: '一楼',
          label: '一楼',
        },
      ],
    },
  ];
  render() {
    const { positionDetail = [], treeTypeData = [] } = this.props;
    // console.log(treeTypeData);
    return (
      <div className={`${styles.container} ${styles.detailComm}`}>
        <div className={styles.containerTitle}>位置: 位置信息采集明细</div>
        <div
          className={styles['inforAnasy-container-top']}
          style={{ paddingLeft: '0', overflow: 'hidden' }}
        >
          <div className={styles['inforAnasy-container-top-btn']}>
            {isMenuVisible('iot:positionInfoLog:exportBusinessInfo') && (
              <Button
                type="link"
                onClick={() => {
                  this.download();
                }}
              >
                <img src={require('@/assets/images/add.png')} alt="" />
                导出EXCEL
              </Button>
            )}
            <Button
              type="link"
              onClick={() => {
                this.go();
              }}
            >
              <Icon type="rollback" />
            </Button>
          </div>
          <div style={{ clear: 'both' }}>
            <div className={styles['inforAnasy-container-top-input dev-search']}>
              {/* <div className={styles['dev-search-select']}>
                                <span className={styles['dev-search-select-title']}>安装区域</span>
                                <Cascader options={treeTypeData} onChange={this.handleChange} showSearch={this.filter} placeholder="请选择安装区域" changeOnSelect={true} />
                            </div> */}
              <div className={styles['dev-search-select']}>
                                                
                <span className={styles['dev-search-select-title']}>采集开始时间</span>
                                                
                <DatePicker
                  value={
                    this.state.filterQueryParams.startTime === 'undefined' ||
                    this.state.filterQueryParams.startTime === ''
                      ? undefined
                      : moment(this.state.filterQueryParams.startTime)
                  }
                  onChange={this.handleStartOpenChange}
                  locale={locale}
                />
                                            
              </div>
                                          
              <div className={styles['dev-search-select']}>
                                                
                <span className={styles['dev-search-select-title']}>采集结束时间</span>
                                                
                <DatePicker
                  value={
                    this.state.filterQueryParams.endTime === 'undefined' ||
                    this.state.filterQueryParams.endTime === ''
                      ? undefined
                      : moment(this.state.filterQueryParams.endTime)
                  }
                  onChange={this.handleEndOpenChange}
                  locale={locale}
                />
                                            
              </div>
              <Button
                type="link"
                className={styles['search']}
                onClick={() => {
                  this.setState(
                    produce((draft: Draft): void => {
                      draft.filterQueryParams.pageNum = 1;
                    }),
                    () => {
                      this.handleFilterQuery();
                    },
                  );
                }}
              >
                搜索
              </Button>
              <Button
                type="link"
                className={styles['search']}
                onClick={() => {
                  this.setState(
                    produce((draft: Draft): void => {
                      draft.filterQueryParams.startTime = 'undefined';
                      draft.filterQueryParams.endTime = 'undefined';
                    }),
                  );
                }}
              >
                重置
              </Button>
            </div>
          </div>
        </div>
        <div className={styles.assetInfo}>
          <div className={styles.assetInfoDiv}>资产编号：{this.props.location.query.deviceId}</div>
          <div className={styles.assetInfoDiv}>
            设备名称：{this.props.location.query.deviceName}
          </div>
          <div className={styles.assetInfoDiv}>
            资产种类：{this.props.location.query.deviceTypeName}
          </div>
        </div>
        <Table
          scroll={{ y: '500px' }}
          pagination={false}
          columns={this.columns}
          dataSource={positionDetail.rows}
        />
        {/* <Pagination onChange={this.handlePageChange} total={byenergyDetails.total} /> */}
        <div className="pagination-box">
          <Pagination
            onChange={this.handlePageChange}
            defaultCurrent={this.state.filterQueryParams.pageNum}
            current={this.state.filterQueryParams.pageNum}
            total={positionDetail.total ? positionDetail.total : 0}
          />
          <span className="pagination-title-box">
            第{this.state.filterQueryParams.pageNum}/
            {Math.ceil(
              (positionDetail.total ? positionDetail.total : 0) /
                this.state.filterQueryParams.pageSize,
            )}
            页 共{positionDetail.total ? positionDetail.total : 0}条
          </span>
        </div>
      </div>
    );
  }
}
export default connect(({ loading, statistics }: any) => ({
  loading: loading.effects['statistics/positionDetail'],
  positionDetail: statistics.positionDetail,
  treeTypeData: statistics.treeTypeData,
}))(byenergyDetail);
